<template>
    <!-- 选择区 -->
    <el-button @click="recommendInfo(1)">头图推荐</el-button>
    <el-button @click="recommendInfo(2)">最近热销</el-button>
    <el-button @click="recommendInfo(3)">新品推荐</el-button>
    
    <el-button type="success" @click="dialogTableVisible = true">添加推荐条目</el-button>

    <!-- 添加新推荐对话框 -->
    <el-dialog v-model="dialogTableVisible">
        <el-form>
            <el-form-item label="商品id">
                <el-input v-model="inputRecommend.goodsId" />
            </el-form-item>
            <el-form-item label="推荐类型">
                <el-radio-group v-model="inputRecommend.type">
                    <el-radio :label="1" name="inputRecommend" >头图推荐</el-radio>
                    <el-radio :label="2" name="inputRecommend" >最近热销</el-radio>
                    <el-radio :label="3" name="inputRecommend" >新品推荐</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-button @click="add">添加！</el-button>
        </el-form>
    </el-dialog>

    <!-- 查看区 -->
    <p class="typetitle">{{ title }}</p>
    <el-table :data="info" height="500" style="width: 100%;">
        <el-table-column type="index" />
        <el-table-column prop="id" label="商品id" width="100px" />
        <el-table-column label="封面图" width="200px">
            <template #default="scope">
                <el-popover placement="auto" :width="400" trigger="hover">
                    <template #reference>
                        <img :src="api.imgUrl + scope.row.cover" class="imgWid" />
                    </template>
                    <img :src="api.imgUrl + scope.row.cover" class="imgWid2" />
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column label="介绍图A" width="200px">
            <template #default="scope">
                <el-popover placement="auto" :width="400" trigger="hover">
                    <template #reference>
                        <img :src="api.imgUrl + scope.row.image1" class="imgWid" />
                    </template>
                    <img :src="api.imgUrl + scope.row.image1" class="imgWid2" />
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column label="介绍图B" width="200px">
            <template #default="scope">
                <el-popover placement="auto" :width="400" trigger="hover">
                    <template #reference>
                        <img :src="api.imgUrl + scope.row.image2" class="imgWid" />
                    </template>
                    <img :src="api.imgUrl + scope.row.image2" class="imgWid2" />
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column prop="name" label="品名" />
        <el-table-column prop="price" label="价格" />
        <el-table-column label="简介">
            <template #default="scope">
                <el-popover placement="auto" :width="400" trigger="hover">
                    <template #reference>
                        <p>
                            {{ scope.row.intro.substring(0, 10) + '...' }}
                        </p>
                    </template>
                    <p> {{ scope.row.intro }} </p>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
            <template #default="scope">
                <el-button type="danger" :icon="Delete" @click="removeInfo(scope.row.id)" />
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>
import api from '@/api/api';
import { onMounted, ref } from 'vue';
import { Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus';

var info = ref([]);
var title = ref('');
var inputRecommend = ref({
    goodsId: 0,
    type: 1
})
var dialogTableVisible = ref(false);

const add = () => {
    api.addRecommend(inputRecommend)
        .then(ret => {
            if (ret) {
                ElMessage({
                    message: '添加成功',
                    type: 'success'
                })
                dialogTableVisible.value = false;
                recommendInfo(inputRecommend.value.type);
            }
            else {
                ElMessage({
                    message: '添加失败：推荐已存在',
                    type: 'error'
                })
            }
        })
        .catch(() => {
            ElMessage({
                message: '添加失败：商品不存在',
                type: 'error'
            })

        })
}

// 删除推荐
const removeInfo = (goodsId) => {
    let typeId = 0;
    switch (title.value) {
        case "头图推荐": typeId = 1; break;
        case "最近热销": typeId = 2; break;
        case "新品推荐": typeId = 3; break;
    }
    ElMessageBox.confirm(
        '确认删除推荐',
        "提示！",
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'error',
        }
    ).then(() => {
        api.removeRecommend(typeId, goodsId)
            .then(ret => {
                if (ret) {
                    ElMessage({
                        message: '删除完成',
                        type: 'success'
                    })
                }
            })
            recommendInfo(typeId);
    })

}

const recommendInfo = (val) => {
    switch (val) {
        case 1: title.value = "头图推荐"; break;
        case 2: title.value = "首页推荐1"; break;
        case 3: title.value = "首页推荐2"; break;
    }
    api.getRecommend(val)
        .then(ret => {
            info.value = ret.result
        })
}

onMounted(() => {
    title.value = "头图推荐";
    api.getRecommend(1)
        .then(ret => {
            info.value = ret.result
        })
})

</script>

<style scoped>
.imgWid {
    width: 8%;
}

.imgWid2 {
    width: 100%;
}

.typetitle {
    text-align: left;
    margin-left: 10px;
    font-size: 30px;
}
</style>